<template>
  <div class="container">
    <Search>
      <span @click="toggle">{{ cityName }}</span>
    </Search>
    <!-- <Inform> </Inform> -->
    <div>
      <van-sticky>
        <van-dropdown-menu>
          <van-dropdown-item title="区域" >
            <van-picker :columns="columns" value-key="label" show-toolbar toolbar-position="bottom"  @confirm="onConfirm">
            </van-picker>
          </van-dropdown-item>
          <van-dropdown-item title="方式">
            <van-picker :columns="columnTwo" value-key="label" show-toolbar toolbar-position="bottom"  @confirm="onConfirm">
            </van-picker>
          </van-dropdown-item>
          <van-dropdown-item title="租金">
            <van-picker :columns="columnThree" value-key="label" show-toolbar toolbar-position="bottom"  @confirm="onConfirm">
            </van-picker>
          </van-dropdown-item>
          <!-- <van-cell   is-link @click="showPopup"> -->
          <van-dropdown-item title="筛选" @open="show=true">
             <!-- <van-picker> -->

             <!-- </van-picker> -->
          </van-dropdown-item>
          <!-- </van-cell> -->
        </van-dropdown-menu>
        <van-popup v-model="show" position="right" :style="{ width: '50%',height:'100%' }" >


        </van-popup>
      </van-sticky>
    <!--   v-model="loading":finished="finished"
        finished-text="没有更多了"  @load="onLoad" -->
      <van-list>
        <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
        <div
          class="house"
          v-for="(item, index) in list"
          :key="index"
          @click="$router.push(`/housedetails/${item.houseCode}`)"
        >
          <div class="imgSrc">
            <img
              :src="'http://www.xiaoshuaipeng.com:8080' + item.houseImg"
              alt=""
            />
          </div>
          <div class="content">
            <h3>{{ item.title }}</h3>
            <p>{{ item.desc }}</p>
            <p>
              <span v-for="(ele, i) in item.tags" :key="i">{{ ele }}</span>
            </p>
            <p>{{ item.price }} <span>元/月</span></p>
          </div>
        </div>
      </van-list>
    </div>
    <!-- <van-empty description="描述文字" v-else/> -->
  </div>
</template>

<script>
// import Inform from "@/components/Inform.vue";
// import axios from "axios";
import Search from "@/components/Search.vue";
import { house, region } from "@/api/user";
export default {
  // components: {
  //   Inform,
  // },
  components: {
    Search,
  },
  name: "HouseIndex",
  data() {
    return {
      columns: [],
      columnTwo: "",
      columnThree: "",
      list: [],
      city: "AREA|dbf46d32-7e76-1196",
      cityName: "上海",
      quyu: "",
      show:false,
      isshow:false,

    };
  },
  created() {},

  methods: {
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
    },
    onConfirm(picker,value){

      console.log(picker)
      console.log(value)
    },
    showPopup() {
      this.show = true;
    },
    cityShju() {
      if (this.$route.query.city.label) {
        console.log(111);
        console.log(this.$route.query.city.value);
        this.city = this.$route.query.city.value;
        this.cityName = this.$route.query.city.label;
      } else {
        this.city = "AREA|dbf46d32-7e76-1196";
        // this.cityName = "上海";
      }
    },
    toggle() {},
  },
  watch: {
    cityName(newVaue) {
      this.cityName = newVaue;
      console.log(newVaue);
    },
    city: {
      immediate: true,
      deep: true,
      async handler(value) {
        const data = await house(value);
        console.log(data);
        this.$toast(`为您找到${data.data.body.count}套房源`);
        this.list = data.data.body.list;

        const res = await region(value);
        console.log(res);
        res.data.body.area.children[0].children = [""];
        res.data.body.subway.children[0].children = [""];
        this.columns.push(res.data.body.area);
        this.columns.push(res.data.body.subway);
        this.columnTwo = res.data.body.rentType;
        this.columnThree = res.data.body.price;

        this.cityShju();
      },
    },
  },
};
</script>

<style scoped lang="less">
*{
  margin: 0;
  padding: 0;
}
body {
  background-color: #fff;
  height: 100%;
}

.house {
  padding: 10px;
  display: flex;
  border: 0.4px solid #e7e7e7;
  background-color: #fff;

  .imgSrc {
    img {
      width: 80px;
      height: 80px;
    }
  }

  .content {
    padding-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    h3 {
      font-size: 15px;
      white-space: nowrap; /* 禁止换行 */
      overflow: hidden; /* 隐藏超出容器的内容 */
      text-overflow: ellipsis; /* 显示省略号 */
      max-width: 200px; /* 设置元素最大宽度 */
    }
    p:nth-child(2) {
      font-size: 12px;
      color: #a9a8a8ea;
    }
    p:nth-child(3) {
      span {
        padding: 3px;
        font-size: 13px;
        background-color: #0fd8f7e8;
      }
    }
    p:nth-child(4) {
      color: red;
    }
  }
}
.van-picker__toolbar{
    height: 55px;
    display: flex;

    border-top: 1px solid #ccc;
    .van-picker__cancel{
      flex: 1;
      color: #21b97a;
    }
    .van-picker__confirm{
      width: 60%;
      background-color: #21b97a;
      color:white

    }
}
.aa{
  z-index: 0;
}


</style>
